<template>
  <div class="wms-in-bound2-search-box">
    <div class="label-view" v-if="label" :style="{width:labelWidth?labelWidth:'auto'}">{{label}}：</div>
    <div class="input-view">
      <a-input :placeholder="placeholder" v-model.trim="innerValue" />
      <div v-if="msg" class="msg-row">
        <a-alert v-if="msgType==='error'" :message="msg" type="error" show-icon />
        <a-alert v-else :message="msg" type="info" show-icon />
      </div>
    </div>
    <div class="btns-view">
      <a-button type="primary" @click="onSearch" :disabled="btnDisabled">搜 索</a-button>
      <a-button @click="onReset" :disabled="btnDisabled">重 置</a-button>
    </div>
  </div>
</template>

<script>
export default {
  name:'wmsInBound2SearchBox',
  emits:['input','search','reset'],
  props:{
    label:{
      type:String,
      default:''
    },
    labelWidth:{
      type:String,
      default:''
    },
    placeholder:{
      type:String,
      default:''
    },
    msgType:{
      type:String,
      default:''
    },
    msg:{
      type:String,
      default:''
    },
    value:{
      type:[String,null],
      default:''
    },
    btnDisabled:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return {
      innerValue:''
    }
  },
  created(){
    this.innerValue = this.value
  },
  watch:{
    innerValue(newVal,oldVal){
      if (newVal!==this.value) {
        this.$emit('input',newVal)
      }
    },
    value(newVal,oldVal){
      if (newVal!==this.innerValue) {
        this.innerValue = newVal;
      }
    }
  },
  methods:{
    onSearch(){
      this.$emit('search',this.innerValue)
    },
    onReset(){
      this.innerValue = ''
      this.$emit('reset')
    }
  }
}
</script>

<style lang="less" scoped>
.wms-in-bound2-search-box{
  width:600px;
  display:flex;
  margin:0 auto;
  .label-view,.btns-view{
    flex-shrink: 0;
  }
  .label-view{
    padding-top: 3.5px;
    text-align: right;
  }
  .btns-view{
    padding-left: 16px;
    .ant-btn + .ant-btn {
      margin-left:10px;
    }
  }
  .input-view{
    flex-grow:1;
    .msg-row{
      padding-top:4px;
    }
  }
}
</style>